<template>
  <div class="bg-content">
    <div v-if="doclist.length > 0">
      <ul class="list">
        <li v-for="(item, index) in doclist" :key="index">
          <div class="item-flex">
            <div class="left">
              <div class="img" v-if="item.avatar">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="img" v-else>
                <img src="../../../../assets/img/main/yisheng.png" alt="" />
              </div>
              <div class="text">
                <h4>
                  <span style="margin-right: 10px">{{ item.doctorName }}</span
                  >{{ item.doctorTitle }}
                </h4>
                <div class="yuyue">预约量:{{ item.ghnum }}</div>
                <div class="sc">擅长:{{ item.goodAt }}</div>
              </div>
            </div>
            <div class="right">
              <div class="title" @click="goAppointment(item)">预约</div>
              <p v-if="item.goodAt">
                <span @click="goInfo(item.goodAt)">更多</span>
                <van-icon name="arrow" />
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="" v-else>
      <van-empty description="暂无关注的医生" />
    </div>

    <van-popup v-model="show"
      ><div class="" style="width: 300px; padding: 10px; font-size: 14px">
        {{ content }}
      </div></van-popup
    >
  </div>
</template>
<script>
import Vue from "vue";
import { Icon, Toast, Dialog } from "vant";
Vue.use(Icon);
import Search from "@c/search";
import { mycollectApi } from "@/service/api.js";
export default {
  name: "index",
  data() {
    return {
      isEmpty: false,
      list: [{}, {}],
      token: "",
      apptoken: "",
      doclist: [],
      show: false,
      content: ""
    };
  },
  components: {
    Search
  },
  created() {
    localStorage.getItem("atoken"),
      (this.token = localStorage.getItem("token"));
    this.apptoken = JSON.parse(localStorage.getItem("apptoken"));

    this.getdoc();
  },
  methods: {
    //获取医生列表
    getdoc() {
      mycollectApi({
        token: this.token,
        apptoken: this.apptoken
      }).then(res => {
        if (res.code == 4000) {
          console.log(res);
          this.doclist = res.data;
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");
          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
      });
    },
    // 详情
    goInfo(el) {
      this.show = true;
      this.content = el;
    },
    // 预约
    goAppointment(item) {
      // Toast("预约成功")
      this.$router.push({
        // name: "Appointment_message"
        name: "doctor_info",
        query: {
          doctorId: item.doctorId,
          departmentId: item.departmentId
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.bg-content {
  background: #f6f6f6;
  margin-top: 1rem;
  padding-bottom: 2rem;
}
.list {
  background: #fff;
  padding: 0 0.2rem;
  li {
    border-bottom: 1px solid #f1f1f1;
  }
}
.item-flex {
  padding: 0.1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.1rem;
  padding-bottom: 0.3rem;
  padding-top: 0.3rem;
  .left {
    display: flex;
    align-items: center;
    h4 {
      font-size: 0.35rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      span {
        font-size: 0.4rem;
      }
    }
    p {
      font-size: 0.35rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
    }
    .text {
      width: 78%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .yuyue {
        margin-top: 0.15rem;
        display: flex;
        align-items: center;
        font-size: 0.35rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }
      .sc {
        width: 6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 0.15rem;
        font-size: 0.35rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      width: 1.2rem;
      height: 0.7rem;
      background: #07c6b4;
      border-radius: 13px;
      font-size: 0.35rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 0.7rem;
    }
    p {
      margin-left: 0.15rem;
      display: flex;
      align-items: center;
      font-size: 5.6px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      margin-top: 0.2rem;
    }
  }
  .img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    margin-right: 11px;
    img {
      border-radius: 50%;
      width: 1.2rem;
      height: 1.2rem;
    }
  }
}
</style>
